<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link href="css/reset.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="js/mootools-1.2.3-core-nc.js"></script>
        <style>
            body {
                font-size: 12px;
            }

            #tab {
                margin: 50px auto;
                border: 1px solid #ccc;
                width: 350px;
                height: 550px;
                overflow: hidden;
                position: relative;
            }

            #tab > ul {
                position: absolute;
                width: 50px;
                list-style: none;
                height: 550px;
                border-right: 1px solid #ccc;
                top: 0px;
                left: 0px;
                margin: 0px;
                padding: 0px;
            }

            #tab > ul li {
                width: 50px;
                height: 50px;
                border-bottom: 1px solid #ccc;
                line-height: 50px;
                text-align: center;
                cursor: default;
            }

            #tab > ul li.selected {
                background: #ccc;
            }

            #tab > div {
                width: 300px;
                height: 550px;
                margin: 0px 0px 0px 50px;
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <div id="tab">
            <ul>
                <li class="selected"><span>新鲜事</span></li>
                <li><span>与我有关</span></li>
            </ul>
            <div>新鲜事</div>
            <div>与我有关<div></div></div>
        </div>
        <script type="text/javascript" src="js/SimpleTab.js"></script>
        <script type="text/javascript">
            window.addEvent('domready', function() {
                var handle = new SimpleTab('tab', {
                    effect: 'opacity',
                    eventType: 'click',
                    stopEvent: true,
                    currentClass:'selected',
                    duration: 500,
                    onSwitch: function(idx) {
                        //alert(idx);
                    }
                });
            });
        </script>
    </body>
</html>
